<template>
	<view class="content">
		<view class="menu-block block">
			<view class="title-top">
				<view class="title">
					{{detail.projectName}}
				</view>
			</view>
			<view class="data">
				<view class="money-title">
					发布时间：
				</view>
				<view class="count">
					{{detail.releaseTime}}
				</view>
			</view>
			<view class="data">
				<view class="money-title">
					投资金额：
				</view>
				<view class="count" style="color: red;">
					￥{{detail.investment}}万元
				</view>
			</view>
		</view>
		<view class="menu-block block">
			<view class="title-top">
				<view class="tips"></view>
				<view class="title">
					联系人
				</view>
			</view>
			<view class="iphone-content">
				<view class="data" style="color: #1A1A1A;">
					<view class="money-title" style="width: 44rpx;height: 42rpx;margin-right: 10rpx;">
						<image src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/phone.png" style="width: 100%;height: 100%;"></image>
					</view>
					<view class="count">
						{{detail.phoneMi}}
					</view>
				</view>
				<view class="iconfont" @click="callPhone(detail.phone)">
					<image class="img" src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/dial.png" style="width: 50rpx;height: 50rpx;"></image>
					<view class="play">拨打</view>
				</view>
			</view>
		</view>
		<view class="menu-block block">
			<view class="title-top">
				<view class="tips"></view>
				<view class="title">
					项目内容
				</view>
			</view>
			<view class="info">
				<view :class="{hide:!iSinfo}">
					{{detail.projectContent}}
				</view>
				<view class="text" @tap="showinfo" v-if="!iSinfo">【查看全部】</view>
			</view>
			<view class="text" @tap="showinfo" v-if="iSinfo" >收起</view>
		</view>
		<view class="menu-block block">
			<view class="title-top">
				<view class="tips"></view>
				<view class="title">
					发展前景
				</view>
			</view>
			<view class="info">
				<view :class="{hide:!iStrue}">
					{{detail.developProspect}}
				</view>
				<view class="text" @tap="showTrue" v-if="!iStrue">【查看全部】</view>
			</view>
			<view class="text" @tap="showTrue" v-if="iStrue" >收起</view>
		</view>
	</view>
</template>

<script>
	import {
		getProjectById,
		addProjectCount
	} from '@/api/entrepot.js';
	import {
		getStorage,
		removeStorage
	} from '@/util/auth.js';
	export default {
		data() {
			return {
				id: null,
				iStrue: false,
				iSinfo: false,
				detail:{
					projectName:'',
					releaseTime: '',
					investment:2,
					phone:'',
					projectContent:'',
					developProspect:'',
					
				}
			}
		},
		methods: {
			goDl(){
				const hasToken = getStorage('token');
				const user = getStorage('user');
				if (user && hasToken) {
					return true;
				} else {
					uni.showModal({
						title: '提示',
						content: '需要先登录！',
						cancelText: '先逛逛',
						confirmText: '去登录',
						success(res) {
							if (res.confirm) {
								uni.navigateTo({url:'/page_other/login/select'})
							}
						}
					})
					
				}
			},
			
			callPhone(e) {
				const hasToken = getStorage('token');
				const user = getStorage('user');
				const id =this.id
				if(user && hasToken){
					uni.makePhoneCall({
						phoneNumber: e,
						success() {
							console.log('拨打成功了');
							addProjectCount({
								id: id,
							}).then(data => {
								console.log(data)
							})
						},
						fail() {
							console.log('拨打失败了');
						}
					})
				}else {
					this.goDl()
				}
			},
			showinfo() {
				this.iSinfo = !this.iSinfo
			},
			showTrue() {
				this.iStrue = !this.iStrue
			},
			navigate(url) {
				uni.navigateTo({
					url
				})
			},
			getList() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getProjectById({
					id: this.id,
				}).then(data => {
					uni.hideLoading()
					this.detail = data
				}).catch(() => {
					uni.hideLoading()
				})
			},
			search() {
				this.more = true
				this.getList(true)
			},
		},
		onLoad(e) {
			this.id = e.id
			this.getList(true)
		}
	}
</script>

<style lang="scss" scoped>
	.menu-block {
		width: 92%;
		margin: 30rpx auto;
		background: #fff;
		border-radius: 12px;
		padding: 30rpx;
		.title-top{
			display: flex;
			.tips{
				width: 18rpx;
				height: 32rpx;
				border-radius: 20rpx;
				background-color: #0256FF;
				margin: 16rpx 12rpx 0 0;
			}
			
			.title{
				font-weight: 900;
				font-size: 32rpx;
				line-height: 60rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				margin-bottom: 25rpx;
			}
			
		}
		.data{
			display:flex;
			color: #767676;
			font-size: 30rpx;
			margin-top: 20rpx;
		}
		.info {
			display: flex;
			flex-direction: column;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 4;

			view {
				text-align:justify ;
				font-size: 28rpx;
				line-height: 60rpx;
				word-break: break-word; //换行模式
				background-color: #fff;
			}

			.text {
				width: 95px;
				font-size: 30rpx;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				// background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%);
				color: #FF0014;
				position: absolute;
				bottom: 30upx;
				right: 30upx;
				opacity: 1;
			}
		}
		.text {
			width: 95px;
			font-size: 30rpx;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			// background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%);
			color: #FF0014;
			position: absolute;
			bottom: 15rpx;
			right: 30upx;
			opacity: 1;
		}
		.hide {
			overflow: hidden;
			word-break: break-word; //换行模式
			overflow: hidden;
			text-overflow: ellipsis; //修剪文字
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 4;
		}
		.project-content{
			line-height: 60rpx;
		}
		.iphone-content{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.iconfont{
				width: 80rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.play{
					font-size: 28rpx;
					color: #767676;
				}
				.img{
					margin-bottom: 10rpx;
				}
			}
		}
	}
</style>